<template>
  <div>
    <ul>
      <li v-for="v in arr" :key="v.cid" @click="golistDetail(v.cid)">
        <img class="iconfont" :src="v.price" />
        <span>{{v.cname}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import getLink from '@/api/getLink.js'
export default {
  data() {
    return {
      arr: []
    }
  },
  created() {
    getLink('/apidl/show/listsCon').then(res => {
      this.arr = res.data
    })
  },
  methods: {
    golistDetail(listconNum) {
      // alert(listconNum)

      this.$router.push({
        path: '/list',
        query: {
          id: listconNum
        }
      })
    }
  }
}
</script>
<style scoped>
ul {
  overflow-x: scroll;
  width: 90%;
  height: 1.6rem;
  display: flex;
  align-items: center;
  margin: auto;
  overflow: auto;
  /* background-color: bisque; */
}
li {
  float: left;
  text-align: center;
}
.iconfont {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: 0.6rem;
  margin-right: 0.2rem;
}
span {
  color: #666666;
  font-size: 0.25rem;
  /* background-color: #ff796f; */
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
</style>